PostCSS Focus Visible
PostCSS Focus Visible lets you use the :focus-visible
pseudo-selector in
CSS, following the Selectors Level 4 specification.
:focus:not(:focus-visible) {
outline: none;
}
:focus:not(.focus-visible) {
outline: none;
}
PostCSS Focus Visible replaces the :focus-visible
pseudo-selector with a
.focus-visible
class selector, the same selector used by the
focus-visible polyfill. The replacement selector can be changed using the
replaceWith
option.
Usage
Add PostCSS Focus Visible to your build tool:
npm install postcss-focus-visible --save-dev
Node
Use PostCSS Focus Visible to process your CSS:
import focusVisible from 'postcss-focus-visible';
focusVisible.process(YOUR_CSS);
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Use PostCSS Focus Visible as a plugin:
import postcss from 'gulp-postcss';
import focusVisible from 'postcss-focus-visible';
postcss([
focusVisible()
]).process(YOUR_CSS);
Webpack
Add PostCSS Loader to your build tool:
npm install postcss-loader --save-dev
Use PostCSS Focus Visible in your Gulpfile:
import focusVisible from 'postcss-focus-visible';
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader', options: {
ident: 'postcss',
plugins: () => [ focusVisible() ]
} }
]
}
]
}
}
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Use PostCSS Focus Visible in your Gulpfile:
import postcss from 'gulp-postcss';
import focusVisible from 'postcss-focus-visible';
gulp.task('css', () => gulp.src('./src/*.css').pipe(
postcss([
focusVisible()
])
).pipe(
gulp.dest('.')
));
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Use PostCSS Focus Visible in your Gruntfile:
import focusVisible from 'postcss-focus-visible';
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
focusVisible()
]
},
dist: {
src: '*.css'
}
}
});
Options
replaceWith
The replaceWith
option defines the selector to replace :focus-visible
. By
default, the replacement selector is .focus-visible
.
focusVisible({ replaceWith: '[data-focus-visible-added]' });
:focus:not(:focus-visible) {
outline: none;
}
:focus:not([data-focus-visible-added]) {
outline: none;
}